<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
    <title></title>
 
  <script src='http://libs.baidu.com/jquery/2.1.1/jquery.min.js'></script>
   <script src="1.js" type="text/javascript" charset="utf-8"></script>
   
        <script type="text/javascript">
    	 var offWidth = window.screen.width / 30;
        		document.getElementsByTagName("html")[0].style.fontSize=offWidth+"px";
   		/*document.addEventListener('plusready', function(){
   			//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"
   			*/
   			
   	
    //添加事件
 
 
    </script>
    
    <style type="text/css">
    	*{
    		margin :0;
    		padding:0;
    		border:none;
    	}
    	html,body{
    		width:100%;
    		height:100%;
    	} 
    	
    	  #page{
    	  	z-index: 5;
    		width:100%;
    		height:100%;
    		background:url(beijing.png);
    		background-size: contain;
    		}
    		
    		.p_shuimo{
    			position: absolute;
    			bottom: 0;
    			width: 100%;
    			height: 100%;
    			background: url(shuimo.png);
    			background-size: contain;
    		}
    		.p_meihua{
    			position: absolute;
    			right: 0rem;
    			top :0rem;
    			width:12.42rem;
    			height: 8.89rem;
    			background: url(meihua.png);
     			background-size: contain;
     			
     			
    		}
    		.p_donglong1{
    			position: absolute;
    			right: 2.846rem;
    			top :4.899rem;
    			width:7.12rem;
    			height: 12.057rem;
    			background: url(denglong1.png);
     			background-size: contain;
     			animation: qq 1.5s linear infinite;
    		-webkit-animation: qq 1.5s linear infinite;
    		}
    		@-webkit-keyframes qq{
    		0% from{
    			 transform: rotate(0deg);
    		}
    		to{
    			transform: rotate(-6deg);
    		}
    		50% {
    			transform: rotate(-6deg);
    		}
    			to{
    			transform: rotate(-12deg);
    		}
    		75% from{
    			transform: rotate(-12deg);
    		}
    			to{
    			transform: rotate(-6deg);
    		}
    		100% from{
    			transform: rotate(-6deg);
    				to{
    			transform: rotate(0deg);
    		}
    		}
    	}
    		
    		.p_bianpao{
    			position: absolute;
    			left: 0rem;
    			top :0rem;
    			width:2.76rem;
    			height: 13.537rem;
    			background: url(bianpao.png);
    			background-size: contain;	
    		}
    	
    	   .p_biankuang1{
    	   	position: absolute;
    	    bottom: 0;
    	   	width: 14.355rem;
    	   	height:5.2137rem;
    	   	background: url(biankuang1.png);
    	   	background-size: contain;
    	   }
    	    .p_biankuang2{
    	   	position: absolute;
    	    bottom: 0;
    	    right: 0rem;
    	   	width: 14.355rem;
    	   	height: 5.2137rem;
    	   	background: url(biankuang2.png);
    	   	background-size: contain;
    	   }
    	   .p_ghxn{
    	   
    			position: absolute;
    			bottom: 16.1rem;
    			left: 1.2rem;
    			
    			width: 29.25rem;
    			height:17.53rem;
    			background: url(ghxn.png);
     			background-size: contain;
     			animation: ja 3s linear infinite;
    		-webkit-animation: ja 3s linear infinite;
    	   }
    	   @-webkit-keyframes ja{
    		0%{
    			transform: scale(1);
    		}
    		25%{
    			transform: scale(1.1);
    		}
    		50%{
    			transform: scale(1);
    		}
    		75%{
    			transform: scale(0.9);
    		}
    		100%{
    			transform: scale(1);
    		}
    	}
    	@keyframes ja{
    		0%{
    			transform: scale(1);
    		}
    		25%{
    			transform: scale(1.1);
    		}
    		50%{
    			transform: scale(1);
    		}
    		75%{
    			transform: scale(0.9);
    		}
    		100%{
    			transform: scale(1);
    		}
    	}
    	  
    
    	   .p_jxry{
    	   	position: absolute;
    			bottom:38.1rem;
    			left:3.65rem;
    			width: 5.25rem;
    			height: 9.53rem;
    			background: url(jxry.png);
     			background-size: contain;
    	    	       	  animation: ha 3s linear infinite;
    		-webkit-animation: ha 3s linear infinite;
    	   }
    	    @-webkit-keyframes ha{
    		from{transform: scale(1.52);}
    		to {transform: scale(0.98);}
    	}
    	@keyframes ha{
    		from{transform: scale(1.52);}
    		to {transform: scale(0.98);}
    	}
    	   .p_jinji{
    	   	position: absolute;
    			bottom: 6.1rem;
    			left: 8.99rem;
    			 width: 13.6rem;
    			 height:15.196rem;
    			background: url(jinji.png);
     			background-size: contain;
    	   	
    	   }
    	   
    	   
    	   .page1_2{
	width:100%;
	height:100%;
	background:url(584fa937c6093.png);
	background-size:contain;
	animation:pa1 3s;
	
}
@keyframes pa1{
	from{
		opacity: 1;
	}
	to{
		opacity: 0.2;
	}
}
    	.page2{
    		width: 100%;
    		height: 100%;
    		background:url(beijing.png);
    		background-size: contain;
    	}   
    	
    	.p2_yinzhang {
	position: absolute;
	width: 2.5rem;
	height: 4.452054794520548rem;
	left: 2rem;
	bottom:6rem;
	background: url(hy_0003_印章.png);
	background-size: contain;
}

.p2_gongji {
	position: absolute;
	width: 5.7rem;
	height: 7rem;
	right: 2rem;
bottom: 6rem;
	background: url(hy_0004_鸡.png);
	background-size: contain;
}

.p2_2017 {
	position: absolute;
	width: 15rem;
	height: 8rem;
	left: 10vw;
	top: 4rem;
	background: url(2017.png);
	background-size: contain;
}

.p2_zhufu {
	width: 25.2rem;
	font-family: "微软雅黑";
	font-size: 1.4rem;
	color: dimgray;
	position: relative;
	top: 25vh;
	left: 0;
	right: 0;
	margin: auto;
	text-align: left;
/*	animation: zfa 2s;
	-webkit-animation: zfa 2s;*/
}

.p2_bainian {
	font-family: "隶书";
	font-size: 4rem;
	
	color: red;
	position: absolute;
	bottom: 7rem;
	left: 8rem;
	text-align: left;
	animation: bn  2s;
}
  
  @keyframes bn{
  	from{
  		opacity: 0;
  	}
  	to{
  		opacity: 1;
  	}
  }
 
 .p2_zhufu	{
 	width: 25.2rem;
	font-family: "微软雅黑";
	font-size: 1.4rem;
	color: dimgray;
	position: relative;
	top: 15rem;	
	animation:zf linear 0.5s;
 }
 @keyframes zf{
 	from{
 		margin-left:30rem ;
 	}
 	to{
 		margin-left:0 ;
 	}
 }
    </style>
</head>
<body>
	
	<div id="page">

		<div class="p_bianpao"></div>
		<div class="p_shuimo"></div>
		<div class="p_meihua"></div>
		<div class="p_donglong1"></div>
	    <div class="p_biankuang1"></div>
	    <div class="p_biankuang2"></div>
	    <div class="p_ghxn"></div>
	    <div class="p_jxry"></div>
	    <div class="p_jinji"></div>
	  </div>
	  <div id="page2" class="page2" style="display: none;">
	  	<div class="p_bianpao"></div>
	  	<div class="p_meihua"></div>
	  	<div class="p_biankuang1"></div>
	    <div class="p_biankuang2"></div>
	    <div class="p2_yinzhang"></div>
	  	<div class="p2_gongji"></div>
	  	<div class="p2_2017"></div>
	    <div class="p2_zhufu">一句平淡如水的问候，很轻；<br />一声平常如纸的祝福，很真。<br />摘一颗星，采一朵云，装入平安的信封里送给你，让快乐好运时刻围绕着你！祝你新年快乐，愿汝"金雞報喜過大年！"</div>
	    <div class="p2_bainian">拜年了!</div>
	  </div>
</body>

</html>